<template>
  <div>
    <div class="hello">
      <!-- 轮播图 -->
      <template>
        <el-carousel :interval="3000" type="card" height="300px">
          <el-carousel-item v-for="(item, index) in list" :key="index">
            <img :src="item">
          </el-carousel-item>
        </el-carousel>
      </template>
    </div>
    <div class="ye">
     
      <div class="aliode" v-for="(a, i) in arr" :key="i">
        <ul class="goods-list" :data="arr">
          <li class="list" @click="paths(a.path)">
            <img :src="a.img">
            <p name="zit">介绍：{{ a.zit }}</p>
            <div class="elbuton">
              <el-button class="el-button--primary" @click="paths(a.path)" type="button" size="small">开始运动</el-button>
            </div>
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {

      arr: [
      ],
      list: [
        require('./../assets/image/lyf/1.webp'),
        require('./../assets/image/lyf/2.webp'),
        require('./../assets/image/lyf/3.webp'),
         require('./../assets/image/lyf/5.webp'),
        
      ],


    }
  },

  components: {},

  methods: {
    paths(path) {
      this.$router.push(path)
    },
    render() {
      axios({
        url: '/dbdata/keeping',
      }).then(({ data }) => {
        // console.log(data);
        this.arr = data
      });
    },
    // 删除
    // del() {
    //   axios({
    //     url: '/dbdata/keeping',
    //     method: 'delete',
    //   }).then(({ data }) => {
    //     this.arr = data
    //     this.$message.success('删除成功')
    //   })
    // },
    // Upload() {


    // }
  },
  mounted() {
    this.render();

  },


}

</script>

<style scoped lang="less">
.demo-form-inline {
  margin-left: -70%;
}
.ye{
  padding-bottom: 20px;
  margin-top: 100px;
}
.aliode {
  float: left;
  width: 270px;
  margin-bottom: 10px;
  margin-left: 18px;
  height: 400px;
  border-radius: 15px;
  border: 0.5px solid rgba(00, 00, 00, 0.2);
  border-radius: 2em;

  &:hover {
    box-shadow: 3px 5px 5px #fffbd4d7;
  }
  .goods-list {
    width: 20%;
    height: 340px;
    line-height: 20px;
    list-style: none;

    .list {
      width: 220px;
      height: 265px;
      margin-left: -15px;

      img {
        width: 100%;
        height: 100%;

      }

      p {
        color: #171717;
        text-align: left;

      }

      .router-link-active {
        text-decoration: none;
      }
    }
  }
}

.elbuton {
  margin-top: -10px;
}

.el-button--primary {
  background-color: rgb(255, 233, 192);
  color: rgba(00, 00, 00, 0.8);
  border-color: rgb(255, 233, 192);
}

.el-button--primary:hover {
  background-color: rgba(255, 233, 192, 0.8);
  color: rgba(00, 00, 00, 0.5);
  border-color: rgba(255, 233, 192, 0.8);
}
</style>